<template>
  <div class="login">
    <div class="login_div">
      <div class="login_box header">
        <div class="w">
          <span class="gsmc">佰联管理后台</span>
          <span class="gstg">机械零部件行业营销推广</span>
        </div>
      </div>
      <div class="login_box content">
        <div class="content_box">
          <div class="login_img">
            <img src="../../img/left_pic.jpg" alt />
          </div>
          <div class="login_con">
            <div class="lg">
              <a-tabs defaultActiveKey="1" class="dl_login">
                <a-tab-pane key="1">
                  <span slot="tab">密码登录</span>
                  <div class="phone ico">
                    <a-icon type="home" class="home_ico" />
                    <a-input
                      type="text"
                      maxlength="11"
                      onkeyup="value=value.replace(/[^\d]/g,'') "
                      onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
                      class="input"
                      v-model="zhvalue"
                      placeholder="请输入手机号码"
                    />
                  </div>

                  <div class="password ico">
                    <a-icon type="lock" class="lock_ico" />
                    <a-input
                      type="password"
                      v-model="password"
                      class="input password"
                      placeholder="请输入密码"
                    />
                  </div>
                  <div class="dl_btn">
                    <a-button type="primary" @click="logindl">登录</a-button>
                    <div class="zhmm">
                      <router-link to="/passwordNew">忘记密码？</router-link>
                      <!-- <router-link to="/viplogin">viplogin</router-link> -->
                      <router-link class="zc" :to="`/reg?membercount=`+this.membercount">立即注册</router-link>
                    </div>
                  </div>
                </a-tab-pane>
                <a-tab-pane key="2" class="yzm_login">
                  <span slot="tab">短信码登录</span>
                  <div class="phone ico">
                    <a-icon type="mobile" class="home_ico" />
                    <a-input
                      type="text"
                      maxlength="11"
                      onkeyup="value=value.replace(/[^\d]/g,'') "
                      onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
                      class="input"
                      v-model="phone"
                      placeholder="请输入手机号码"
                    />
                  </div>

                  <div class="dxyzm ico">
                    <a-icon type="lock" class="lock_ico" />
                    <a-input
                      type="text"
                      maxlength="6"
                      onkeyup="value=value.replace(/[^\d]/g,'') "
                      onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
                      class="input"
                      placeholder="短信码"
                      v-model="msgCode"
                    />
                    <span class="code">
                      <a-button class="dx_btn" @click="getcode">获取短信码</a-button>
                      <span class="dateup" v-if="secflg">{{count}}后在尝试...</span>
                    </span>
                  </div>
                  <div class="dl_btn">
                    <a-button type="primary" @click="msgcode">登录</a-button>
                    <div class="zhmm">
                      <span></span>
                      <router-link class="zc" :to="`/reg?membercount=`+this.membercount">立即注册</router-link>
                    </div>
                  </div>
                </a-tab-pane>
              </a-tabs>
            </div>
          </div>
        </div>
      </div>
      <div class="login_box footer">
        <div class="fot_tit">西安佰联网络技术有限公司 Copyright 佰联轴承网 陕ICP备12004210号-2</div>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import { setTimeout, setInterval } from "timers";
export default {
  inject: ["reload"],
  data() {
    return {
      zhvalue: "",
      //
      password: "",
      //
      secflg: false,
      count: "",
      timer: null,
      code: "",
      phone: "",
      msgCode: "",
      membercount: "",
      //价格权限
      priceManage: {
        WLTEJIA_ok: 0,
        WLLSJ_ok: 0,
        WLPFJ_ok: 0,
        WLZDJ_ok: 0,
        PAIJIA_ok: 0
      }
    };
  },

  methods: {
    logindl() {
      if (this.password != "" && this.zhvalue != "") {
        this.axios
          .post(
            "login/PassLogin.php",
            qs.stringify({
              account: this.zhvalue,
              passWord: this.password,
              membercount: this.membercount
            })
          )
          .then(res => {
            if (res.data.code == 303) {
              this.$store.state.filename = res.data.result.SQDWID;
              this.$store.state.token = res.data.token;
              console.log(this.$store.state.token);
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
              sessionStorage.setItem("date_sess", new Date().getTime());
              this.reload();

              this.setsession(res);
            } else {
              this.$notification["error"]({
                message: "警告",
                description: res.data.msg
              });
            }
          });
      } else {
        this.$notification["error"]({
          message: "警告",
          description: "手机号码或密码不能为空！！！"
        });
      }
    },

    setsession(res) {
      sessionStorage.setItem("sqdwid", res.data.result.SQDWID);
      this.$store.state.bbl_sqdwid = res.data.result.SQDWID;
      this.$store.state.bbl_sub_mchid = res.data.result.sub_mchid;
      this.$store.state.bbl_phone = res.data.result.phone;
      sessionStorage.setItem("dwmc", res.data.result.dwmc);
      sessionStorage.setItem("wlkhjb", res.data.result.WLKHJB);
      sessionStorage.setItem("phone", res.data.result.phone);
      sessionStorage.setItem("tablefl", res.data.result.tablefl);
      sessionStorage.setItem(
        "language",
        JSON.stringify(res.data.result.language)
      );
      sessionStorage.setItem("bdwxnc", res.data.result.bdwxnc);
      sessionStorage.setItem("lxr ", res.data.result.tablefl);
      sessionStorage.setItem("applymentstate", res.data.result.applyment_state);
      sessionStorage.setItem("sub_mchid", res.data.result.sub_mchid);
      //存储价格权限--显示隐藏-字段--开始
      if (res.data.result.priceManage) {
        var priceManage_list = res.data.result.priceManage;
        if (priceManage_list.indexOf("WLTEJIA") != -1) {
          this.priceManage.WLTEJIA_ok = 1;
        }
        if (priceManage_list.indexOf("WLLSJ") != -1) {
          this.priceManage.WLLSJ_ok = 1;
        }
        if (priceManage_list.indexOf("WLPFJ") != -1) {
          this.priceManage.WLPFJ_ok = 1;
        }
        if (priceManage_list.indexOf("WLZDJ") != -1) {
          this.priceManage.WLZDJ_ok = 1;
        }
        if (priceManage_list.indexOf("PAIJIA") != -1) {
          this.priceManage.PAIJIA_ok = 1;
        }
      }
      sessionStorage.setItem("priceManage", JSON.stringify(this.priceManage));
      //存储价格权限--显示隐藏-字段--结束

      for (var i = 0; i < res.data.result.power.length; i++) {
        res.data.result.power[i].menu_path = res.data.result.power[
          i
        ].menu_path.trim();
        this.$store.state.powerID.push(res.data.result.power[i].id_num);
      }
      sessionStorage.setItem(
        "powerID",
        JSON.stringify(this.$store.state.powerID)
      );

      sessionStorage.setItem("power", JSON.stringify(res.data.result.power));
      let power = res.data.result.power;
      this.$store.commit("getpower", power);

      this.$router.push("/");
    },
    msgcode() {
      // if (this.msgCode == this.code) {
      this.axios
        .post(
          "login/MsgCodeLogin.php",
          qs.stringify({
            account: this.phone,
            msgCode: this.msgCode,
            membercount: this.membercount
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$store.state.token = res.data.token;

            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
            this.setsession(res);
          } else {
            this.$notification["error"]({
              message: "警告",
              description: res.data.msg
            });
          }
        });
      // } else {
      //   this.$notification["error"]({
      //     message: "警告",
      //     description: "验证码不正确"
      //   });
      // }
    },
    getcode() {
      this.axios
        .post(
          "login/GetCode.php",
          qs.stringify({
            account: this.phone,
            login_type: 1
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.code = res.data.result;
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
            const time_count = 60;
            if (!this.timer) {
              this.count = time_count;
              this.secflg = true;
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= time_count) {
                  this.count--;
                } else {
                  this.secflg = false;
                  clearInterval(this.timer);
                  this.timer = null;
                }
              }, 1000);
            }
          } else {
            this.$notification["error"]({
              message: "警告",
              description: res.data.msg
            });
          }
        });
    }
  },
  created() {}
};
</script>
<style lang='less' >
.header {
  position: relative;
  z-index: 999;
  background-color: #fff;
  width: 100%;
  height: 65px;
  text-align: center;
  display: flex;
  align-items: center;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1);
  .w {
    width: 1200px;
    text-align: left;
    margin: 0 auto;
    .gsmc {
      font-size: 22px;
      color: #000;
      font-family: 宋;
      font-weight: bold;
      margin-right: 20px;
    }
    .gstg {
      font-size: 20px;
      font-family: 楷体;
      color: #999;
    }
  }
}
.login {
  position: relative;
  z-index: 999;
  height: auto;
  width: 100%;
  .login_div {
    height: auto;

    .content {
      background-color: #f3f7f9;
      height: 720px;
      overflow: hidden;
      .content_box {
        position: relative;
        width: 800px;
        height: 490px;
        background-color: #fff;
        margin: 80px auto;
        text-align: left;
        .login_img {
          width: 366px;
          height: 100%;
          display: inline-block;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .login_con {
          position: relative;
          display: inline-block;
          width: 432px;
          height: 100%;
          .lg {
            width: 334px;
            height: auto;
            margin: 0 auto;
            text-align: center;
            position: absolute;
            top: 20%;
            left: 50%;
            margin-left: -165px;
            .dl_login {
              .ico {
                position: relative;
                i {
                  position: absolute;
                  font-size: 16px;
                  top: 27px;
                  left: 23px;
                  z-index: 9;
                  color: #b9bed1;
                }
                //   .home_ico {
                //     top: 27px;
                //     left: 23px;
                //     z-index: 9;
                //   }
                //   .lock_ico {
                //        top: 27px;
                //     left: 23px;
                //     z-index: 9;
                //   }
              }
              .input {
                width: 95%;
                height: 50px;
                border-radius: 25px;
                margin: 10px 0;
                padding: 0 0px 0 37px;
                font-size: 16px;
                background-color: #f0f2f7;
                border: 0 !important;
              }
              .dl_btn {
                width: 100%;
                text-align: center;
                margin: 20px 0;
                button {
                  width: 90%;
                  height: 50px;
                  border-radius: 30px;
                  font-size: 18px;
                  background-color: #0076fe !important;
                }
                .zhmm {
                  display: flex;
                  justify-content: space-between;
                  text-align: left;
                  padding: 15px 35px;
                  .zc {
                    color: #0076fe;
                  }
                }
              }
            }
            .yzm_login {
              .dxyzm {
                text-align: left;
                padding: 0 8px;
                .input {
                  width: 50%;
                }
                .dx_btn {
                  width: 40%;
                  height: 45px;
                  border-radius: 30px;
                  margin-left: 10px;
                  border: 0;
                  background-color: #f1f7ff;
                }
                .code {
                  position: relative;
                  .dateup {
                    position: absolute;
                    top: -14px;
                    left: 11px;
                    display: inline-block;
                    width: 125px;
                    height: 43px;
                    background: rgba(255, 255, 255, 0.8);
                    border-radius: 30px;
                    text-align: center;
                    line-height: 46px;
                  }
                }
              }
            }

            .ant-tabs-bar {
              border-bottom: 2px solid #eee;
            }
            .ant-tabs-nav .ant-tabs-tab {
              font-size: 16px !important;
            }
            .ant-tabs-nav .ant-tabs-tab-active {
              font-size: 18px !important;
            }
          }
        }
      }
    }
    .footer {
      position: relative;
      width: 100%;
      background-color: #f3f7f9;
      height: 150px;
      .fot_tit {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 16px;
        color: #999;
      }
    }
  }
}
</style>
